﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>SHOP DETAIL</title>
		<%@ include file="/share/include.jsp" %>
   		 <meta name="viewport" content="width=device-width, initial-scale=1">
		 <script type="application/x-javascript"> 
			addEventListener("load", function() { 
				setTimeout(hideURLbar, 0); 
			}, false); 
			function hideURLbar(){ 
				window.scrollTo(0,1); 
			} 
		</script>
		<!-- calendar -->
		  <%--  <link href='${root }/css/fullcalendar.css' rel='stylesheet' />
			<link href='${root }/css/fullcalendar.print.css' rel='stylesheet' media='print' />
			<script src='${root }/js/moment.min.js'></script>
			<script src='${root }/js/fullcalendar.min.js'></script> --%>
		<!-- 预约站内信 -->
		<script>
			//全局变量,作为判断 页面是否是初次加载的判断条件
			var falg = true;
			//已经选中的日期设置选中状态的唯一标识ID.切换选中时根据这个ID删除原有选中状态
			var startId = null;
			jQuery(document).ready(function($){
				//当前系统日期 如(2015-01-01)
				var nowDate = currentYMD();
				/****************加载下预约时选择日期的工作日历,加载完成后隐藏该日历*****************/
					//预约时工作日历选择时间
				$('#orderCalendar').fullCalendar({
					defaultDate: nowDate,
					selectable: true,
					selectHelper: true,
					select: function(start, end) {
						//设置繁忙的日期
						var date = start.format();
						//判断两个日期的大小
						if(dateCompare(nowDate,date) != 1){
							//获取当前页日历下的所有events
							var eObjs = $('#orderCalendar').fullCalendar('clientEvents');
							//根据event的日期判断,用户选择的当天是否存在卖家设置的工作状态如果,存在,给予用户提示,不存在设置选择的日期到指定位置
							var eventFalg = true;
							a:for ( var i = 0; i < eObjs.length; i++) {
								var startDate = eObjs[i].start.format();
								if(dateCompare(startDate,date) == 2){
									eventFalg = false;
									break a;
								}
							}
							//已经存在工作状态(繁忙),给予用户提示
							if(eventFalg){
								var eventData;
								//取消原先已经选择的时间
								if(startId != null){
									$('#orderCalendar').fullCalendar( 'removeEvents',startId);
								}
								startId = start;
								//页面展示繁忙状态(不刷新页面,只添加一个状态显示,在切换日期重新加载状态的时候,要先情况状态,将此类显示去除,避免重复显示)
								eventData = {
									id: startId,
									title: 'Choose',
									start: start,
									end: end,
									color: 'black',     // an option!
           	 						textColor: 'yellow'
								};
								$('#orderCalendar').fullCalendar('renderEvent', eventData, true); // stick? = true
								$('#orderTime').val(date);
								hideOrderCalendar();
							}else{
								artDalog('Prompt',date+', the seller has set busy!', null);
							}
						}
						$('#orderCalendar').fullCalendar('unselect');
					},
					editable: true,
					eventLimit: true, // allow "more" link when too many events
					events: function(start, end, timezone, callback) {
						//清楚现有的状态显示,然后重新加载状态显示(否则存在多显示记录条数)
						//$('#orderCalendar').fullCalendar( 'removeEvents');
						//获取当前日期(此日期是当前日历上的日期,如果是本月,则是系统日期,如果非本月,则获取该月的第一日)
						 var moment = $('#orderCalendar').fullCalendar('getDate');
						//设置查询日期(截取日期)
						var searchDate = moment.format().substring(0,10);
						//alert(searchDate);
						//异步加载日历信息
				        $.ajax({
				            url: '${root}/control/calendar/calendarController/calendarList.do?shopId=${shop.shopId}&searchDate='+searchDate,
				            dataType: 'json',
				            data: {
				                // our hypothetical feed requires UNIX timestamps
				                start: start.unix(),
				                end: end.unix()
				            },
				            success: function(doc) {
				                var events = [];
				                $(doc).each(function() {
				                	events.push({
				                    	id: $(this).attr('id'),
				                    	//url:'javascript:removeEvents('+$(this).attr('id')+');',
				                        title: 'Busy',
				                        start: $(this).attr('date') // will be parsed
				                    });
				                });
				                callback(events);
				                //falg 为 true 代表初次加载页面,隐藏该日历
				                if(falg){
				                	//隐藏预约时间选择的日历
									$('#orderCalendarDiv').hide();
									//设置日历的位置悬浮在最中央
									$('#orderCalendarDiv').css("top","0");
									$('#orderCalendarDiv').css("left","0");
									$('#orderCalendarDiv').css("right","0");
									$('#orderCalendarDiv').css("bottom","0");
				                }
				            }
				        });
				    }
				});
				
				/****************加载店铺的工作日历*****************/
				//店铺工作日历展示
				$('#calendar').fullCalendar({
						defaultDate: nowDate,
						selectable: true,
						selectHelper: true,
						select: function(start, end) {
							$('#calendar').fullCalendar('unselect');
						},
						editable: true,
						eventLimit: true, // allow "more" link when too many events
						events: function(start, end, timezone, callback) {
							//清楚现有的状态显示,然后重新加载状态显示(否则存在多显示记录条数)
							//$('#calendar').fullCalendar( 'removeEvents');
							//获取当前日期(此日期是当前日历上的日期,如果是本月,则是系统日期,如果非本月,则获取该月的第一日)
							 var moment = $('#calendar').fullCalendar('getDate');
							//设置查询日期(截取日期)
							var searchDate = moment.format().substring(0,10);
							//alert(searchDate);
							//异步加载日历信息
					        $.ajax({
					            url: '${root}/control/calendar/calendarController/calendarList.do?shopId=${shop.shopId}&searchDate='+searchDate,
					            dataType: 'json',
					            data: {
					                // our hypothetical feed requires UNIX timestamps
					                start: start.unix(),
					                end: end.unix()
					            },
					            success: function(doc) {
					                var events = [];
					                $(doc).each(function() {
					                	events.push({
					                    	id: $(this).attr('id'),
					                    	//url:'javascript:removeEvents('+$(this).attr('id')+');',
					                        title: 'Busy',
					                        start: $(this).attr('date') // will be parsed
					                    });
					                });
					                callback(events);
					            }
					        });
					    }
					});
					
				
				/****************下预约订单*****************/
				var roleType = '${roleType}';
				//用户下预约订单
			    $('.yuyue').click(function(){
			    	if(roleType == '1'){
			    		$('#orderDiv').show();
			    		//artDalog('Prompt',$('.contact-bottom-grids').html(),null);
			    	}else if(roleType == '' || roleType == null){
			    		artDalog('Prompt','Please login first, after logging in to make an appointment','${root}/control/layoutController/displayUserLogin.do?${cityValue}');
			    	}else{
			    		artDalog('Prompt','You are not the user to make an appointment',null);
			    	}
				});
			
				$('#orderClose').click(function(){
					$('#orderDiv').hide();
				});
				
				//表单提交前 验证 表单
		        var orderDemo = $("#updateForm").Validform({
					btnSubmit : "#btn_sub",
					tiptype : function(msg,o,cssctl){
						//msg：提示信息;
						//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
						//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
						if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
							var objtip=o.obj.siblings(".Validform_checktip");
							cssctl(objtip,o.type);
							objtip.text(msg);
						}else{
							var objtip=o.obj.find("#msgOrderDemo");
							cssctl(objtip,o.type);
							objtip.text(msg);
						}
					},
					ajaxPost:true,//ajax异步提交表单
					url:'${root }/control/order/orderItemController/userAddOrder.do',
					beforeCheck:function(curform){
						 
					 },
					 beforeSubmit:function(data){
						 
					 },callback:function(data){
					 	//alert(data.info);
					 	if(data.status == 'y' && data.info.length == 14){
					 		$('#orderDiv').hide();
					 		artDalog('Prompt','Make an appointment success!','${root}/control/order/orderItemController/userOrderList.do?orderUserId=${userSession.userId}');
					 	}else{
					 		artDalog('Prompt','Make an appointment to failure!', null);
					 	}
					 }
				});
				//设置验证成功后的提示信息
				orderDemo.tipmsg.r = 'Through verification!';
				
				/****************发送站内信*****************/
				//用户发站内信				
				$('#letterButton').click(function(){
			    	if(roleType == '1'){
			    		$('#letterDiv').show();
			    		//artDalog('Prompt',$('.contact-bottom-grids').html(),null);
			    	}else if(roleType == '' || roleType == null){
			    		artDalog('Prompt','Please login first, after logging in to send a letter','${root}/control/layoutController/displayUserLogin.do?${cityValue}');
			    	}else{
			    		artDalog('Prompt','You are not the user cannot be for sellers to send letters',null);
			    	}
				});
			
				$('#letterClose').click(function(){
					$('#letterDiv').hide();
				});
				
				//表单提交前 验证 表单
		        var letterDemo = $("#letterForm").Validform({
					btnSubmit : "#btn_sub",
					tiptype : function(msg,o,cssctl){
						//msg：提示信息;
						//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
						//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
						if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
							var objtip=o.obj.siblings(".Validform_checktip");
							cssctl(objtip,o.type);
							objtip.text(msg);
						}else{
							var objtip=o.obj.find("#msgLetterDemo");
							cssctl(objtip,o.type);
							objtip.text(msg);
						}
					},
					ajaxPost:true,//ajax异步提交表单
					url:'${root }/control/letter/letterController/userAddLetter.do',
					beforeCheck:function(curform){
						 
					 },
					 beforeSubmit:function(data){
						 
					 },callback:function(data){
					 	//alert(data.info);
					 	if(data.status == 'y' && data.info.length == 36){
					 		$('#letterDiv').hide();
					 		artDalog('Prompt','Send letter successfully!','${root}/control/letter/letterController/userSentLetterList.do?letterUserId=${userSession.userId}');
					 	}else{
					 		artDalog('Prompt','Send letter failure!', null);
					 	}
					 }
				});
				//设置验证成功后的提示信息
				letterDemo.tipmsg.r = 'Through verification!';
			});
			
			//显示选择预约日期的工作日历
			function showOrderCalendar(){
				//修改全局变量表示页面非初次加载
				falg = false;
				$('#orderDiv').hide();
				$('#orderCalendarDiv').css("z-index","100");
				$('#orderCalendarDiv').show();
			}
			//隐藏预约日期的工作日历
			function hideOrderCalendar(){
				$('#orderDiv').show();
				$('#orderCalendarDiv').css("z-index","-1");
				$('#orderCalendarDiv').hide();
			}
		</script>
		<!--end 预约站内信-->
		<style type="text/css">
			.text-fild-register{
				width:48%;
				margin-right:4%;
				float:left;
			}
			.text-fild-register span,.message-fild-yuyue span{
				display:block;
				font-size: 0.875em;
				/* padding:0 0 0.5em 0; */
			}
			.text-fild-register input[type="text"],.message-fild-yuyue textarea{
				padding:0.8em;
				width:100%;
				outline:none;
				color:#b0aaa0;
				font-family: 'Lora', serif;
				border: 1px solid #DAD8D8;
			}
			.text-fild-register:nth-child(2){
				margin:0;
			}
			.message-fild-yuyue textarea{
				min-height:250px;
				resize:none;
				padding: 0.5em;
			}
			.Validform_checktip{margin:4px 0;}
			.fc-basic-view tbody .fc-row {
                min-height: 53px;
                border: 1px solid #DDD;
            }
            .fc-scroller {
                border: 0;
            } 
		</style>
	</head>
	<body>
		<!-- container -->
		<!-- header -->
		<div class="header">
			<%@ include file="/control/jsp/layout/header.jsp" %>
			<!-- /bottom-header -->
		</div>
		<!-- header -->
		<!--- top-nav -->
			<%@ include file="/control/jsp/layout/indexMenu.jsp" %>
		<!--- top-nav -->
		<!-- Product-Details-page -->
		<div class="details-page">
			<div class="content details-page">
			<!---start-product-details--->
			<div class="product-details">
				<div class="container">
					<ul class="product-head">
						<li><a href="shop.html">SHOP</a> <span>::</span></li>
						<li class="active-page">DETAIL</li>
						<div class="clearfix"> </div>
					</ul>
				<script>
						jQuery(document).ready(function($){
			
							$('#etalage').etalage({
								thumb_image_width: 300,
								thumb_image_height: 400,
								source_image_width: 900,
								source_image_height: 1000,
								show_hint: true,
								click_callback: function(image_anchor, instance_id){
									alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
								}
							});
							// This is for the dropdown list example:
							$('.dropdownlist').change(function(){
								etalage_show( $(this).find('option:selected').attr('class') );
							});
							
					});
				</script>
				<!----//details-product-slider--->
				<div class="details-left" style="width: 70%;">
					<div class="details-left-slider" style="width: 280px;">
					    <img src="${imageService }${shop.shopLogo}" height="175" width="175">
						<div class="product-more-details">
							<input type="button" id="letterButton" style="margin-right: 20px;" value="Letter"><input class="yuyue" type="button" value="Booking">
						</div>
					</div>
					<div class="details-left-info" style="width: 280px;">
						<div class="details-right-head">
						<h1>${fn:escapeXml(shop.shopName)}</h1>
						<p class="product-detail-info">The contact：${fn:escapeXml(shop.shopContact)}</p>
						<p class="product-detail-info">Contact phone：${fn:escapeXml(shop.contactTel) }</p>
						<p class="product-detail-info" >Contact address：${fn:escapeXml(shop.shopAddress) }</p>
							<%@ include file="/jslib/raty/ratyRead.jsp" %>
						<!-- <p class="product-detail-info">好评率：<span>100%</span></p> -->
						<p class="product-detail-info">Evaluation：
							<span style="color:red;">
								<c:if test="${not empty shop.shopCommentNum}">${shop.shopCommentNum }</c:if>
								<c:if test="${empty shop.shopCommentNum}">0</c:if>
							</span>
						</p>
					</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="details-right" style="width: 29%;">
					<h4 style="text-align: left;font-weight: 700;color: red;">To work in the current</h4>
					<div id='calendar' style="width:330px;position: relative;"></div>
				</div>
				<div class="clearfix"> </div>
				<!---//评论--->
				<div >
					<ul class="product-head" style="border: 1px solid #dbdbdb;padding: 0 10px;background: antiquewhite;">
						<li><a href="#"></a>SHOP <span>::</span></li>
						<li class="active-page">CASE</li>
						<div class="clearfix"> </div>
					</ul>
					 <!-- start content_slider -->
					   <div id="shopCase" class="owl-carousel text-center">
					   		<div style="border: 1px solid #dbdbdb;padding: 0 0px;background: antiquewhite;">
					   		<c:if test="${not empty casesPageView.records }">
				       			<c:forEach items="${casesPageView.records }" var="cases">
				       				<div class="item" style="margin: 20px 22px 20px 5px;height: 350px;">
					                	<div onClick="location.href='${root }/control/layoutController/displayCaseDetail.do?caseId=${cases.caseId }&${cityValue }';" class="product-grid">
											<div class="product-pic">
												<c:if test="${not empty cases and not empty cases.picList }">
							  						<c:forEach items="${cases.picList }" var="pic" begin="0" end="0">
							  							<img src="${imageService }${pic.picPath}" title="${cases.caseTitle }" alt="${cases.caseTitle }"  style="height: 200px;width: 198px;"  />
							  						</c:forEach>
							  					</c:if>
							  					<c:if test="${empty cases or empty cases.picList }">
							  						<img src="${imageService }${cases.caseTitle}" title="${cases.caseTitle }" alt="${cases.caseTitle }"  style="height: 200px;width: 198px;"  />
							  					</c:if>
											</div>
											<div class="product-pic-info">
												<h3><a href="#">${cases.caseTitle }</a></h3>
												<h4><a href="#">${cases.caseArea}㎡&nbsp;&nbsp;${cases.caseHouseType}</a></h4>
												<div class="product-pic-info-price-cart">
													<div class="product-pic-info-price">
														<span>$ ${cases.casePrice}</span>
													</div>
													<div class="product-pic-info-cart">
													</div>
													<div class="clearfix"> </div>
												</div>
											</div>
										</div>
					                </div>
				       			</c:forEach>
				       		</c:if>
				       		<c:if test="${empty casesPageView.records }">
				       			The shop no case information
				       		</c:if>
				       		<div class="clearfix"> </div>
				       		</div>
				       		<c:if test="${not empty casesPageView.records }">
				       		<%@ include file="/share/shopCasesPage.jsp" %>
				       		</c:if>
					  </div>
				<!--//sreen-gallery-cursual---->
				</div>
				<!---//评论--->
				<div id="shopComment">
					<ul class="product-head" style="border: 1px solid #dbdbdb;padding: 10px 10px 0;background: antiquewhite;">
						<li><a href="#">COMMENT</a> <span>::</span></li>
						<li class="active-page">DETAIL</li>
						<div class="clearfix"> </div>
					</ul>
					<c:if test="${not empty commentPageView.records }">
		       			<c:forEach items="${commentPageView.records }" var="comment">
		       				<div class="details">
								<h4>【User】${comment.commentUserName }</h4>
								<p><span>Score：<fmt:formatNumber type="number" pattern="###.#">${comment.starLevel }</fmt:formatNumber>分</span><span style="float: right;"><fmt:formatDate value="${comment.commentCreateTime}" pattern="yyyy-MM-dd"/></span></p>
								<p style="border-bottom: 1px solid #dbdbdb;padding-bottom: 10px;">${comment.commentContent }</p>
							</div>
		       			</c:forEach>
		       			<%@ include file="/share/shopCommentPage.jsp" %>
		       		</c:if>
		       		<c:if test="${empty commentPageView.records }">
		       			The shop no comment on information
		       		</c:if>
				</div>
				<!---//End-评论--->
			<!---//End-product-details--->
			</div>
		</div>
		</div>
		</div>
		<!-- /Product-Details-page -->
		<!--预约站内信-->
		<!-- 预约 -->
		<div id="orderDiv" class="contact-bottom-grids" style="display:none;position: fixed;z-index: 99;margin:auto;top: 0;left: 0;right:0;bottom:0;width: 700px;background: wheat;">
			<div class="contact-bottom-grid-right" style="float: none;margin: 0 auto;width: 90%;">
				<h3>Online Booking Message <span id="orderClose" class="close" style="float: right;margin-top: -20px; cursor:pointer;"><img src="${root}/images/010.gif"></span></h3>
				<form id="updateForm" action="${root }/control/order/orderItemController/userAddOrder.do" method="post">
					<div class="text">
						<div class="text-fild-register">
							<span>Your Name:</span>
							<input type="hidden" name="orderUserId" value="${userSession.userId }" >
							<input type="hidden" name="orderShopId" value="${shop.shopId }" >
							<input type="hidden" name="orderCaseId" value="${cases.caseId }" >
							<input type="text" name="orderName" style="padding: 0.4em;" class="text" value="${userSession.realName }" maxlength="50" dataType="*1-50" nullmsg="Please fill in your name!" errormsg="Name length in 1 ~ 50 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="text-fild-register">
							<span>Your Gender:</span>
							<input type="radio" class="text" name="orderSex" <c:if test="${userSession.userSex == '1'}">checked="checked"</c:if> value="1" style="width: 20px;height: 20px;"> Male
							<input type="radio" class="text" name="orderSex" <c:if test="${userSession.userSex == '2'}">checked="checked"</c:if> value="2" style="width: 20px;height: 20px;"> Female
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="text">
						<div class="text-fild-register">
							<span>Your Phone:</span>
							<input type="text" name="orderPhone" style="padding: 0.4em;" class="text" value="${userSession.userPhone }" maxlength="50" dataType="*1-50" nullmsg="Please fill in your phone!" errormsg="Phone length in 1 ~ 50 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="text-fild-register">
							<span>Your Address:</span>
							<input type="text" name="orderAddress" style="padding: 0.4em;" class="text" value="${userSession.userAddress }" maxlength="100" dataType="*1-100" nullmsg="Please fill out your address!" errormsg="Address length in 1 ~ 100 between!">
							<div class="Validform_checktip"></div>
						</div>
					</div>
					<div class="text">
						<div class="text-fild-register">
							<span>Property Name:</span>
							<input type="text" name="orderHousesName" style="padding: 0.4em;" class="text" maxlength="100" dataType="*1-100" nullmsg="Please fill out the property name!" errormsg="Property Name length in 1 ~ 100 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="text-fild-register">
							<span>Housing Area(㎡):</span>
							<input type="text" name="orderArea" style="padding: 0.4em;" class="text" maxlength="9" dataType="/^\d{1,6}(\.\d{1,2})?$/" nullmsg="Please fill in the area!" errormsg="The largest area of not more than 999999!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="text">
						<div class="text-fild-register">
							<span>Appointment Time:</span>
							<input type="text" id="orderTime" name="orderTimeStr" style="padding: 0.4em;" class="text" readonly="readonly" onclick="showOrderCalendar();" maxlength="100" dataType="*1-100" nullmsg="Please fill out the appointment time!" >
							<div class="Validform_checktip"></div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="message-fild-yuyue">
						<span style="">The Message:</span>
						<textarea name="orderContent" style="min-height: 100px;" maxlength="2000" dataType="*1-2000" nullmsg="Please fill in the message!" errormsg="The message length in 1 ~ 2000 between!"> </textarea>
						<div class="Validform_checktip"></div>
					</div>
					<input style="margin:0 0 10px;float: right;" type="submit" value="Send">
					<span id="msgOrderDemo" style="margin-left:30px;"></span>
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
		<!-- 站内信 -->
		<div id="letterDiv" class="contact-bottom-grids" style="display:none;position: fixed;z-index: 99;margin:auto;top: 0;left: 0;right:0;bottom:0;width: 700px;background: wheat;">
			<div class="contact-bottom-grid-right" style="float: none;margin: 0 auto;width: 90%;">
				<h3>The Letter Station <span id="letterClose" class="close" style="float: right;margin-top: -20px; cursor:pointer;"><img src="${root}/images/010.gif"></span></h3>
				<form id="letterForm" action="${root }/control/letter/letterController/userAddLetter.do" method="post">
					<div class="text">
						<div class="text-fild-register" style="width: 100%;">
							<span>The Title:</span>
							<input type="text" name="letterTitle" style="padding: 0.4em;" class="text" value="" maxlength="50" dataType="*1-50" nullmsg="Please fill in the title!" errormsg="Title length in 1 ~ 50 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="text">
						<div class="text-fild-register">
							<span>Your Name:</span>
							<input type="hidden" name="letterUserId" value="${userSession.userId }" >
							<input type="hidden" name="letterShopId" value="${shop.shopId }" >
							<input type="text" name="letterUserName" style="padding: 0.4em;" class="text" value="${userSession.realName }" maxlength="50" dataType="*1-50" nullmsg="Please fill in your name!" errormsg="Name length in 1 ~ 50 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="text-fild-register">
							<span>Your Phone:</span>
							<input type="text" name="letterPhone" style="padding: 0.4em;" class="text" value="${userSession.userPhone }" maxlength="50" dataType="*1-50" nullmsg="Please fill in your phone!" errormsg="Phone length in 1 ~ 50 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="text">
						<div class="text-fild-register">
							<span>Shop Name:</span>
							<input type="text" name="letterShopName" value="${shop.shopName }" style="padding: 0.4em;" readonly="readonly" class="text" maxlength="100" dataType="*1-100" nullmsg="Please fill out the shop name!" errormsg="Shop Name length in 1 ~ 100 between!">
							<div class="Validform_checktip"></div>
						</div>
						<div class="text-fild-register">
							<span>Order Number(Can not fill):</span>
							<input type="text" name="letterOrderId" value="" ajaxurl="${root}/control/letter/letterController/checkOrderByUserAndShop.do?letterUserId=${userSession.userId}&letterShopId=${shop.shopId}" style="padding: 0.4em;"  class="text" maxlength="14" dataType="*14-14" errormsg="Phone length of 14!" ignore="ignore">
							<div class="Validform_checktip"></div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="message-fild-yuyue">
						<span style="">The Content:</span>
						<textarea name="letterContent" style="min-height: 100px;" maxlength="2000" dataType="*1-2000" nullmsg="Please fill in the content!" errormsg="The content length in 1 ~ 2000 between!"> </textarea>
						<div class="Validform_checktip"></div>
					</div>
					<input style="margin:0 0 10px;float: right;" type="submit" value="Send">
					<span id="msgLetterDemo" style="margin-left:30px;"></span>
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div id="orderCalendarDiv" style="position: fixed;z-index: -1;margin:auto;top: -1000;left: -1000;width: 700px;height:560px;background: #f6f6f6;">
			<h3 style="width: 90%;margin: auto;margin-top: 10px;">Appointment Time <span id="calendarClose" onclick="hideOrderCalendar();" class="close" style="float: right;padding-right: -15px; cursor:pointer;"><img src="${root}/images/010.gif"></span></h3>
			<div id='orderCalendar' style=""></div>
		</div>
		<!--end 预约站内信-->
		<!-- footer -->
		<%@ include file="/control/jsp/layout/footer.jsp" %>
</body>
</html>

